/* eslint-disable */
// 加载
import paste from '../js/paste'
require('./chatScreen.css')
// 文件下标计数
let fileId = 0
// 文件数组容器
let fileArray = []
// 视频文件发送
let videoFile
let isAt = null
// 最后光标的位置
// 文件消息初始
const fileInitial = () => {
  fileId = 0; fileArray = []
}
let doc,win,savedRange

function setCaretPosition () {
  let sel
  if (savedRange != null) {
    sel = win.getSelection()
    if (sel.rangeCount > 0) { sel.removeAllRanges() }
    sel.addRange(savedRange)
  } else if ((sel = doc.selection) && sel.type != 'Control') {
    win.getSelection().addRange(savedRange)
  }
}
function getCaretCharacterOffsetWithin (e) {
  let caretOffset = 0
  let sel
  if (typeof win.getSelection != 'undefined') {
    sel = win.getSelection()
    if (sel.rangeCount > 0) {
      const range = win.getSelection().getRangeAt(0)
      const preCaretRange = range.cloneRange()
      preCaretRange.selectNodeContents(document.getElementById('preId'))
      preCaretRange.setEnd(range.endContainer, range.endOffset)
      caretOffset = preCaretRange.toString().length
      savedRange = range
    }
  } else if ((sel = doc.selection) && sel.type != 'Control') {
    const textRange = sel.createRange()
    const preCaretTextRange = doc.body.createTextRange()
    preCaretTextRange.moveToElementText(document.getElementById('preId'))
    preCaretTextRange.setEndPoint('EndToEnd', textRange)
    caretOffset = preCaretTextRange.text.length
    savedRange = textRange
  }
}
// 光标前插入节点函数
function insertPositionNode (nodeId, doc) {
  let range, selection,area// 记录光标位置对象
  selection = window.getSelection()// 获取当前选中区域
  area = document.getElementById('preId')
  // 判断选中区域为某个节点id时才能触发
  if (selection.baseNode && (selection.baseNode.id == nodeId || selection.baseNode.parentElement.id == nodeId)) {
    const node = selection.anchorNode
    // 这里判断是做是否有光标判断，因为弹出框默认是没有的
    if (node != null) {
      range = selection.getRangeAt(0)// 获取光标起始位置
    } else {
      range = undefined
    }
    range.insertNode(doc)// 在光标位置插入该对象
    selection.collapseToEnd()// 光标移动至末尾
  } else {
    setCaretPosition()
    document.execCommand('insertHTML',false, doc)
  }
};
// dom主动获取焦点并且移动到末尾
function getFocus () {
  const selection = window.getSelection()// 获取当前选中区域
  // 判断选中区域为某个节点id时才能触发
  if (!(selection.baseNode && (selection.baseNode.id == 'preId' || selection.baseNode.parentElement.id == 'preId'))) {
    const obj = document.getElementById('preId')
    if (window.getSelection) {
      obj.focus()
      selection.selectAllChildren(obj)	// range 选择obj下所有子内容
      selection.collapseToEnd()	 // 光标移至最后
    } else if (document.selection) {
      const range = document.selection.createRange()	// 创建选择对象
      range.moveToElementText(obj)	// range定位到obj
      range.collapse(false)	 // 光标移至最后
      range.select()
    }
  }
}

// 设置按键发送与换行
function keydownFun (cbok) {
  return function(event) {
    // 发送操作
    if (!event.ctrlKey && event.keyCode == 13 && !isAt) {
      event.preventDefault()
      send(cbok)()
    } else
    // 换行操作
    if (event.ctrlKey && event.keyCode == 13 && !isAt) {
      event.preventDefault()
      newlineFun()
      boxScroll()
    };
  }
};

// 换行函数
function newlineFun() {
  const br_ = document.createElement('br')
  insertPositionNode('preId', br_)
};

// 滚动条始终保持最下方
function boxScroll() {
  const doc = document.getElementById('preId')
  doc.scrollTop = doc.scrollHeight
};

// 编辑框添加文件信息
function pushFile(file) {
  const temp = file.name.substring(file.name.lastIndexOf('.') + 1);
  console.log(temp,'1230')
  const doc_img = document.createElement('img')
  doc_img.setAttribute('src', require(`../../assets/image/${temp}.png`))
  doc_img.setAttribute('data-fileid', fileId++)
  doc_img.setAttribute('style', 'width:40px;height:40px;')
  insertPositionNode('preId', doc_img)
};

// 视频发送
function pushVideo(cbok) {
  return function() {
    fileId++
    if (cbok) {
      cbok(videoFile)
    }
  }
};
function pusEmoji (emoji) {
  const doc = document.createTextNode(emoji)
  insertPositionNode('preId', emoji)
}
// 编辑框添加图片信息
function pushImage (src_) {
  console.log(src_)
  const doc = document.createElement('img')
  doc.setAttribute('src', src_)
  doc.setAttribute('data-imageid', fileId++)
  doc.setAttribute('style', 'vertical-align:bottom;')
  insertPositionNode('preId', doc)
};
// 获取并操作文件信息
function obtainFile() {
  const fileVal = document.getElementById('uploadFile').files
  for (let i = 0; i < fileVal.length; i++) {
    // 判断文件类型并操作
    judgeFileType(fileVal[i])
  };
  document.getElementById('uploadFile').value = ''
};

// 获取文件绝对路径
function getObjectURL(file) {
  let url = null
  if (window.createObjcectURL != undefined) {
    url = window.createOjcectURL(file)
  } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(file)
  } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(file)
  }
  return url
}

// 判断文件类型
function judgeFileType(file_) {
  const type = file_.type

  // 图片类型文件处理
  if (type.indexOf('image') > -1) {
    // 追加文件
    fileArray.push(file_)
    pushImage(getObjectURL(file_))
  } else

  // 视频类型文件处理
  if (
    type.indexOf('audio') > -1 ||
		type.indexOf('video') > -1
  ) {
    videoFile = file_
    document.getElementById('sendVideo').click()
  } else

  // 其它文件类型
  {
    fileArray.push(file_)
    pushFile(file_)
  }
};

// 文件拖拽至输入框
function dropFile() {
  // 获取拖拽区域
  const dropPre = document.querySelector('#preId')
  // 绑定拖动释放事件
  dropPre.ondrop = function(e) {
    e.preventDefault()
    getFocus()
    // 获取文件对象
    const fileVal = e.dataTransfer.files
    for (let i = 0; i < fileVal.length; i++) {
      // 判断文件类型并操作
      judgeFileType(fileVal[i])
    };
  }
};

// 切割发送消息
function cutSend(preVal) {
  const messageArr_ = []
  let bool = false
  let str = ''

  preVal.forEach((item, index, array) => {

    // 文本
    if (item.nodeName == '#text') {
      if (item.data !== '') {
        str += item.data
      }
    } else

    // 图标
    if (item.nodeName == 'IMG') {
      // 图片文件
      if (item.dataset.imageid) {
        if (str !== '') {
          messageArr_.push({
            type: 'text',
            msg: str
          })
        }
        messageArr_.push({
          type: 'file',
          fileIndex: item.dataset.imageid
        })
        bool = true
      }

      // 其它文件
      if (item.dataset.fileid) {
        if (str !== '') {
          messageArr_.push({
            type: 'text',
            msg: str
          })
        }
        messageArr_.push({
          type: 'file',
          fileIndex: item.dataset.fileid
        })
        bool = true
      }
    } else
    // 换行符
    if (item.nodeName == 'BR') {
      str += '\n'
    }
    if (bool) {
      str = ''
      bool = false
    }
  })
  if (str !== '') {
    messageArr_.push({
      type: 'text',
      msg: str
    })
  }
  return messageArr_
};

// 发送消息
function send (cbok) {
  return function() {
    // 获取输入框数据信息
    const preVal = document.getElementById('preId').childNodes
    if (cbok) {
      cbok(cutSend(preVal), fileArray)
    }
  }
};


/** **********************************	设置 *************************************** */

// 表情包操作
function expressionOperation (cbok) {
  // 切换表
  function switchExpression() {
    document.getElementById('bqShow_k').innerHTML = qqemoji()

    function qqemoji() {
      let str = ''
      // 113个表情
      for (let i = 0; i < 105; i++) {
        str += `<button  class="Iclick qq_bqsize" ><i class="qqemoji qqemoji${i}" data-qqemoji="${i}"></i></button>`
      };	return str
    };

    if (cbok) {
      const qqemojiArr = document.getElementsByClassName('qqemoji')
      for (let i = 0; i < qqemojiArr.length; i++) {
        qqemojiArr[i].onclick = function() {
          const index_ = this.getAttribute('data-qqemoji')
          const class_ = this.getAttribute('class')
          cbok({ index_, class_ })
        }
      };
    };
  };

  return {
    switchExpression
  }
};

export default {
  // 输入框初始
  initializeEmpty () {
    console.log(isAt)
    if(isAt) return false
    document.getElementById('preId').innerHTML = ''
    fileInitial()
  },
  changeAt (value) {
    console.log(value,'2139')
    isAt = value
  },
  membersClick (account) {
    console.log(account,'12399')
  },
  async onPaste (e) {
    const { file, width, height, content } = await paste(e)
    console.log(content, '123000')
    const imgRegx = /^data:image\/png;base64,/
    if (imgRegx.test(content)) {
      pushImage(content)
      fileArray.push(file)
    } else {
      insertPositionNode('e',content)
    }
  },
  // 视频文件初始
  initiaVideo() {
    videoFile = {}
  },
	openEmoji () {
  },
  getCursor () {
    getCaretCharacterOffsetWithin()
  },
  // 表情包点击
  expressionClick: function (emoji) {
   pusEmoji(emoji)
  },
  // 打开文件夹
  webWechatPicClick() {
    getFocus()
    videoFile = {}
    document.getElementById('uploadFile').click()
  },
  // 选中文件夹
  uploadFile: obtainFile,
  // enter键发送
  preIdKeydown (sendFun) {
    return keydownFun(sendFun)
  },
  // 点击发送按钮
  sendMsgClick(sendFun) {
    return send(sendFun)
  },
  // 发送视频
  sendVideo(sendVideoFun) {
    return pushVideo(sendVideoFun)
  },
  // 启动文件拖拽
  dropFile,
  // 发送文本消息
  sendmsg: function() {},
  // 发送视频消息
  sendvideo: function() {},
  // 发送语音消息
  sendaudio: function() {},
  // 修改发送文本消息函数
  setSendMsg: function(cbok) {
    this.sendmsg = cbok
  },
  // 修改发送视频消息函数
  setSendVideo: function(cbok) {
    this.sendvideo = cbok
  },
  // 修改发送语音消息函数
  setSendAudio: function(cbok) {
    this.sendaudio = cbok
  },
  onload () {
    const editor = document.getElementById('preId')
    doc = editor.ownerDocument || editor.document
    win = doc.defaultView || doc.parentWindow
    setTimeout(() => {
      editor.focus()
    },100)
  }
}
